// 需求 在网页中追加星星,然后删除星星,删除的时候血条显示进度

// 封装随机函数
function random(max,min){
    return Math.floor(Math.random()*(max-min+1)+min)
}

// 1.设置间隔定时器
setInterval(function(){
    // 1.1造星星
    var imgObj=document.createElement('img')
    imgObj.src='./star.gif'
    // 1.2随机设置星星的高度宽度
    var max=50
    var min=30
    imgObj.width=random(50,30)
    imgObj.height=random(50,30)
    // 1.3随机设置星星显示的范围
    var maxLeft=(window.innerWidth||document.documentElement.clientWidth)-imgObj.width
    var maxTop=(window.innerHeight||document.documentElement.clientHeight)-imgObj.height
    imgObj.style.position='absolute'
    imgObj.style.left=random(maxLeft,0)+'px'
    imgObj.style.top=random(maxTop,0)+'px'
    // 1.4追加到页面中
    document.body.appendChild(imgObj)

},1000)

// 二.删除星星
   // 2给.网页绑定点击事件
   document.onclick=function(evt){
    // 2.1获取事件对象
    var e=evt||window.event
    // 2.2获取操作的标签
    var targetObj=e.target||e.srcElement
    // 2.3判断操作的标签
    if(targetObj.nodeName=='IMG'){
        document.body.removeChild(targetObj)
        widthObj++
        divObj.style.width=widthObj+'px'
    }
}

// 三.血条进度
// 3.设置间隔定时器

setInterval(function(){
   
    // 3.1获取血条
     divObj=document.querySelector('.xue-life')
     widthObj=parseInt(getComputedStyle(divObj).width)
    console.log(widthObj);
    widthObj--
    divObj.style.width=widthObj+'px'
    // getComputedStyle(divObj).width=widthObj+'px'
    // 设置不能设置行外样式 只能设置行内样式
    


},1000)

